import React, { useEffect, useState } from "react";
import ContentTop from '../../../components/ContentTop'
import { PlusOutlined } from '@ant-design/icons';
import { goodsAdd, goodsImgUpload, cateCategories } from "../../../api/account";
import {
    Form,
    Input,
    Button,
    Select,
    InputNumber,
    Upload,
    message,
} from 'antd';

export default function GoodsAdd() {
    const { TextArea } = Input;
    const [imgUrl, setImgUrl] = useState("");
    const [imgItem, setImgItem] = useState("");
    const [datasList, setDatasList] = useState([]);

    const [form] = Form.useForm();
    const layout = {
        labelCol: {
            span: 2,
        },
    };
    const tailLayout = {
        wrapperCol: {
            offset: 2,
        },
    };

    const normFile = (e) => {
        if (Array.isArray(e)) {
            return e;
        }
        return e?.fileList;
    };

    
    const fetchData = async () => {
        const res = await cateCategories();
        setDatasList(res.data.categories);
    }
    useEffect(() => {
        fetchData();
    }, []);

    const { Option } = Select;

    const handleChange = async ({ file }) => {
        const formData = new FormData();
        formData.append('file', file);
        const res = await goodsImgUpload(formData);
        if (res.data.code == 0) {
            setImgUrl(`http://8.137.157.16:9002${res.data.imgUrl}`);
            let index = res.data.imgUrl.lastIndexOf('/');
            setImgItem(res.data.imgUrl.substring(index + 1));
        }
    };

    const onFinish = async (values) => {
        const data = {
            name: values.name,
            category: values.category,
            price: values.price,
            imgUrl: imgItem,
            goodsDesc: values.goodsDesc
        }
      let res = await goodsAdd(data);
      if(res.data.code == 0){
        message.success(res.data.msg);
      }else{
        message.error(res.data.msg);
      }
    };

    return (
        <>
            <div className="app-content">
                <ContentTop>
                    <div className="title">
                        添加商品
                    </div>
                </ContentTop>

                <div className="content-info">
                    <Form
                        {...layout}
                        form={form}
                        name="control-hooks"
                        onFinish={onFinish}
                    >
                        <Form.Item
                            name="name"
                            label="商品名称"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入商品名称',
                                },
                            ]}
                        >
                            <Input style={{
                                width: '100%',
                                height: 40,
                            }} />

                        </Form.Item>
                        <Form.Item
                            name="category"
                            label="商品分类"
                            rules={[
                                {
                                    required: true,
                                    message: '请选择商品分类',
                                },
                            ]}
                        >
                            <Select
                                placeholder="请选择商品分类"
                                allowClear
                                style={{
                                    width: 240,
                                    height: 40,
                                }}
                            >
                                {
                                    datasList.map(option => {
                                        return (
                                            <Option value={option.cateName} key={option.key}>
                                                {option.cateName}
                                            </Option>
                                        )
                                    })}
                            </Select>
                        </Form.Item>
                        <Form.Item
                            label="商品价格"
                            name="price"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入商品价格',
                                },
                            ]}
                        >
                            <InputNumber size="large" min={0} />
                        </Form.Item>

                        <Form.Item
                            label="商品图片"
                            valuePropName="fileList"
                            getValueFromEvent={normFile}
                            name="imgUrl" rules={[
                                {
                                    required: true,
                                    message: '请添加商品图片',
                                },
                            ]}
                        >
                            <Upload
                                accept="image/png, image/jpeg"
                                customRequest={handleChange}
                                listType="picture-card"
                                showUploadList={false}
                            >
                                {imgUrl ? (
                                    <img src={imgUrl} alt="" style={{ width: 105, height: 105 }} />
                                ) : (<button
                                    style={{
                                        border: 0,
                                        background: 'none',
                                    }}
                                    type="button"
                                >
                                    <PlusOutlined />
                                </button>)}

                            </Upload>
                        </Form.Item>
                        <Form.Item
                            label="商品描述"
                            name="goodsDesc"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入商品描述',
                                },
                            ]}
                        >
                            <TextArea rows={4} />
                        </Form.Item>

                        <Form.Item {...tailLayout}>
                            <Button type="primary" htmlType="submit" style={{ width: 100, height: 40 }}>
                                添加商品
                            </Button>
                        </Form.Item>
                    </Form>
                </div>

            </div>
        </>
    )
}
